同樣的一個網(wǎng)頁會在不同設(shè)備上顯示不同的布局，從而帶來良好的用戶體驗。本文將通過設(shè)計一個簡單到不能再簡單的響應(yīng)式框架來昆山建站公司展現(xiàn)響應(yīng)式設(shè)計的基本原理。網(wǎng)頁的響應(yīng)式設(shè)計是一種設(shè)計實踐，這種設(shè)計實踐是隨著移動互聯(lián)網(wǎng)時代的到來而逐漸興起的。隨著智能設(shè)備的興起，人們不再僅僅是通過個人電腦來訪問網(wǎng)頁，還有可能使用智能手機或者平板電腦昆山建站公司，如何適配各種不同尺寸大小，不同分辨率的設(shè)備，為網(wǎng)頁設(shè)計帶來了新的挑戰(zhàn)。而響應(yīng)式設(shè)計就是一種解決方案，采用響應(yīng)式設(shè)計后，

一. 什么是響應(yīng)式設(shè)計

就像我們可以用盒子模型的思維來看待網(wǎng)頁一樣，我們同樣可以使昆山建站公司用“格子”的思維來看待網(wǎng)頁的結(jié)構(gòu)。我們的眼睛在看東西時會遵循一定的模式，比如先從左往右看，然后從上往下看。比如先看文字，然后看標題，最后再閱讀下面的文字等等。我們將這樣的設(shè)計稱為網(wǎng)格布局，很多網(wǎng)站都遵昆山建站公司循網(wǎng)格布局。

編寫一個響應(yīng)式框架的原理就是通過創(chuàng)建一些通用的CSS類來定義所需要的樣式，特別是控制元素寬度的技巧以及在頁面上排布的方式。創(chuàng)建用于控制布局的CSS類是一種最佳實踐。

二. 一個非常簡單的響應(yīng)昆山建站公司式框架

要實現(xiàn)響應(yīng)式設(shè)計，讓網(wǎng)站根據(jù)瀏覽器的大小來改變元素的大小，肯定不能用絕對尺寸，比如300px，必須使用百分比代表的相對尺寸。在上一個學習筆記中我們提到，如果將元素的尺寸設(shè)置為百分比，那么該元素的昆山建站公司大小由離它最近的父元素大小決定。響應(yīng)式框架的基本原理就是將一行（row）拆分為12個網(wǎng)格（grid），這樣我們就可以基于網(wǎng)格進行各種形態(tài)的布局設(shè)計。

三. 一些小技巧

1. 負空間

設(shè)計中有個概念叫“負空間昆山建站公司”，即不包含任何內(nèi)容的空間。如果你發(fā)現(xiàn)相鄰的文字之間靠的太近，可以使用padding為元素增加內(nèi)邊距。內(nèi)邊距是元素之間創(chuàng)建負空間的絕佳手段。如果想在元素外邊創(chuàng)建負空間，還可以使用外邊距margin。

四昆山建站公司. 媒體查詢

可以使用媒體查詢（media queries），使得CSS隨著頁面的變化而發(fā)生改變。這樣無論用戶是使用手機還是臺式機，都可以根據(jù)用戶所用設(shè)備類型來改變頁面的CSS。例如以下媒體查詢將在屏幕昆山建站公司小于300px時將段落中的文字背景顏色改為藍色。

五. 適配各型瀏覽器

一旦建立了HTML的結(jié)構(gòu)，就可以考慮添加其他東西了，比如語義標簽。對于頁面昆山建站公司上比較重要的信息，可以使用h1，h2和h3這樣的元素來顯示，同時也可以用語義元素劃分頁面的區(qū)域，比如header，footer等等。